<template>
  <div class="fenlei">
    <!-- 头部 -->
    <zj @chuanfuji="zj"></zj>

    <van-tree-select
      height="100vh"
      :items="sidBtnList"
      :main-active-index.sync="sidebarKey"
      class="sidebarclass"
    >
      <!-- class="sidebarclass" -->
      <template #content>
        <div class="cellGroup" v-if="topNav">
          {{ search }}
        </div>

        <div class="cellGroup" v-else>
          {{ sidBtnList[sidebarKey].text }}
        </div>

        <!-- 图片 -->
        <div v-if="sidebarKey === sidebarKey" class="gridFoods">
          <van-row>
            <div v-for="(item, inx) in foodslist" :key="inx" :title="item">
              <!-- 分类图像信息开始 -->
              <router-link :to="`/Xiangqing/${item.id}`">
                <van-col span="12">
                  <!-- 分类图像开始 -->
                  <van-image class="imageClass" :src="item.pic" />
                  <p class="nameClass">{{ item.name }}</p>
                  <!-- 分类图像结束 -->
                </van-col>
              </router-link>
              <!-- 分类图像信息结束 -->
            </div>
          </van-row>
        </div>
      </template>
    </van-tree-select>

    <!-- 底部选项卡 -->
    <xrzp-tabbar></xrzp-tabbar>
  </div>
</template>
<script>
import zj from "../../components/Header_bar/index.vue";
import { getCpFlSearch, getCpFlClassid } from "@/apis/modules/cp.fl";
export default {
  components: { zj },
  data() {
    return {
      search: "",
      // contentKey: [], //保存图片内容
      sidebarKey: 0, //导航条的初始值为0
      topNav: false, //搜索内容的判断条件
      sidBtnList: [
        { classid: 324, text: "粥" },
        { classid: 351, text: "汤" },
        { classid: 352, text: "羹" },
        { classid: 326, text: "面" },
        { classid: 333, text: "馄饨" },
        { classid: 332, text: "汤圆" },
        { classid: 316, text: "腌菜" },
        { classid: 313, text: "药膳" },
        { classid: 335, text: "饺子" },
        { classid: 334, text: "馒头" },
        { classid: 341, name: "饼干" },
      ], //保存当前侧边导航条内容
      foodslist: [], //保存当前图片列表
    };
  },
  methods: {
    //子级
    zj(val) {
      console.log(`搜索关键字:${val}....`);
      if (val != "") {
        this.search = val;
        this.topNav = true;
        // this.axios
        //   .get(
        //     `/jisuapi/search?keyword=${val}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
        //   )
        //   .then((result) => {
        //     this.foodslist = result.data.result.result.list;
        //     // console.log(result.data.result.result.list);
        //     // 修改状态
        //     // this.$store.commit("Search", result.data.result.list);
        //   });
        (async () => {
          const res = await getCpFlSearch(val);
          this.foodslist = res.data.result.result.list;
        })();
      } else {
        this.topNav = false;
        this.loadfoodslist(324, (list) => {
          this.foodslist = list;
        });
      }
    },

    loadfoodslist(classid, callback) {
      // this.axios
      //   .get(
      //     `/jisuapi/byclass?classid=${classid}
      // &start=0&num=20&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
      //   )
      //   .then((result) => {
      //     // console.log(result);
      //     // console.log(`加载"${this.sidBtnList[this.sidebarKey].text}"分类...`);
      //     let foodslist = result.data.result.result.list;
      //     // console.log(foodslist);
      //     // 立即调用callback，执行后续任务
      //     callback(foodslist);
      //   });
      (async () => {
        const result = await getCpFlClassid(classid);
        let res = result.data.result.result.list;
        callback(res);
      })();
    },
  },
  loadMore() {
    let cid = this.name[this.sidebarKey];
    // console.log(`loadMore...cid:${cid} `);
  },
  watch: {
    //监听顶部导航
    sidebarKey(newval) {
      //滚动到顶部
      window.scrollTo(0, 0);
      this.search = "";
      // newval 即是切换到的类别cid,可以作为cid发请求
      // 发请求 更新列表
      this.loadfoodslist(this.sidBtnList[newval].classid, (list) => {
        this.foodslist = list;
      });
    },
  },
  // 挂载之后
  mounted() {
    this.loadfoodslist(324, (list) => {
      this.foodslist = list;
    });
  },
};
</script>
<style>
.fenlei .icon {
  width: 45px;
  display: inline-block;
  margin: 4px 0 0 13px;
}
.fenlei .index_header_search {
  padding: 10px 0;
}
/* .fenlei .searchBtn {
  margin: 12px 10px 5px 4px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  padding-left: 4px;
  padding-right: 4px;
} */
/* 头部背景颜色 */
/* 统一样式 rgb(123, 183, 253) */
.fenlei .bacc {
  background-color: rgb(123, 183, 253);
}
.sidebarclass {
  font-weight: bold;
  text-align: center;
}

.cellGroup {
  width: 75%;
  text-align: center;
  font-size: 15px;
  background-color: rgb(245, 246, 248);
  position: fixed;
  z-index: 1;
  /* padding: 0 0 0 3px; */
  font-weight: bold;
  margin: 54px 0 0 0;
}
.cellGroup .van-cell {
  background-color: rgb(245, 246, 248);
  padding: 8px 0 0 0;
}
.cellGroup .van-cell-group {
  background-color: rgb(245, 246, 248);
  margin: 0 0 9px 0;
}
.gridFoods {
  margin: 89px 0 75px 0px;
  width: 100%;
}
.imageClass {
  margin: 0 5px 0 0;
  width: 92%;
  height: 92%;
}
.nameClass {
  font-size: 10px;
  margin-left: 3px;
  font-weight: bold;
}
.sidebarclass .van-sidebar-item {
  line-height: 18px;
}
</style>
